<!DOCTYPE Html>
<html>
<head>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>UniTunes - Pesquisa Musicas</title>
	
	<script type="text/javascript">
	
	var index = 0;
	
	$(window).scroll(function()
	{
	    if($(window).scrollTop() == $(document).height() - $(window).height())
	    {
			loadMore();
	    }
	});
	
	function loadMore()
	{
        $('div#loadmoreajaxloader').show();
        $.ajax({
        data: {index       :  index,
        	   maxResults : '4',
        	   autorID    : ("${userSession.user.id}"),
        	   termo      : $("#buscaString").val()},
        dataType: 'json',
        async: false,
        url: "musica/pesquisaResults",
        success: function(html)
        {       
            if(html)
            {
                $("#postswrapper").append(html);
                $('div#loadmoreajaxloader').hide();
            }else
            {
                $('div#loadmoreajaxloader').html('<center class="semResultados">Sem mais resultados</center>');
            }
        }
        });
        index =  index + 4;
	}

	function busca()
	{
		index = 0;
		$("#postswrapper").empty();
		loadMore();
	}

	function imagemOnClick(id)
	{
		$('#imagemInput' + id).val(null);					
	}
	
	function imagemOnChange(id)
	{
		$('#imagemForm' + id).submit();
	}
	
	function arquivoOnClick(id)
	{
		$('#arquivoInput' + id).val(null);					
	}
	
	function arquivoOnChange(id)
	{
		$('#arquivoForm' + id).submit();
	}	
		
	
	</script>	
	
</head>
<body>	
	
	<script>loadMore()</script>
	
	<div class="pesquisaTopArea"> 
		<div class="buscaArea">
			<input type="text" value="${buscaString}" id="buscaString"></input>
		</div>
		<div class="buttonArea">
			<button class="cadastroButton" onclick="busca( )">Busca</button>					
		</div>		
	</div>
	
	
	<div id="postswrapper">

	</div>	
    <div id="loadmoreajaxloader" style="display:none;"><div><img src="img/ajax-loader.gif" /></div></div>

</body>
</html>

 